<template>
    <div class="article-item">
        <!-- 文章 -->
        <div class="articles-body">
            <article-content :item="articleContent" id="content">
                <template slot="title">
                    {{ articleContent.articleTitle }}
                </template>
            </article-content>
        </div>
        <!-- 评论 -->
        <div class="comment">
            <comment :articleId="articleContentId" :type="1"></comment>
        </div>
    </div>
</template>
<script>
import { mixin } from "@/mixins";
import { articleById } from "../api/index";
import ArticleContent from "../components/ArticleContent";
import Comment from "../components/Comment";

export default {
    name: "article-item",
    mixins: [mixin],
    components: {
        ArticleContent,
        Comment,
    },
    data() {
        return {
            articleContentId: 0,
            articleContent: {
                articleTitle: "",
                articleContent: "",
                textType: 0, // 编译类型 0-mk 1-html
            }, // 当前页面需要展示的文章列表
        };
    },
    created() {
        this.articleContentId = this.$route.params.id;
        console.log(this.articleContentId);
        this.getArticleContent(this.articleContentId);
    },
    methods: {
        // 根据文章id获取文章信息
        getArticleContent(id) {
            articleById(id)
                .then((res) => {
                    console.log(res);
                    this.articleContent = res.data;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
};
</script>

<style lang="scss" scoped>
@use "../assets/css/article-item.scss";
</style>
